<?php
$dirname = "./thumb/";
$images = scandir($dirname);
$ignore = Array(".","..");
$size = sizeof($images) - sizeof($ignore);

?>
<html>
<head>
<meta http-equiv="refresh" content="30">
<title>MySight web interface</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
function update () {
	var thumbArray = <?php echo json_encode($images) ?>;
	var ignoreElements = <?php echo json_encode($ignore) ?>;
	var d = new Date();

	$.each(thumbArray, function(counter, img) { 
		if ((counter-2)>-1) {
			var path = "./thumb/"+img;

			var imgName = "#myImage" + (counter-2);
			$(imgName).attr("src", path+"?"+d.getTime()).error(function() {
				$(imgName).attr("src", "./noIMG.png"+"?"+d.getTime());
			});

			//$.ajax({
			//	url: path,
			//	type: 'HEAD',
			//	async: false,
			//	error: function() {
			//		var imgName = "#myImage" + (counter-2);
			//		$(imgName).attr("src", "./noIMG.png"+"?"+d.getTime());
			//	},
			//	success: function(){
			//		var imgName = "#myImage" + (counter-2);
			//		$(imgName).attr("src", path+"?"+d.getTime());
			//	}
			//});
		};
	});

	setTimeout(update, 1000);
};
</script>
<style type="text/css">
.titleLine {
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-image: url(./backTitle.png);
	background-repeat: repeat-x;
}
</style>
</head>
<body onLoad="javascript:update();" bgcolor="d7d7d7">
<font face="Helvetica">

<div class="titleLine"> <img src="./Title.png"> <br><br><br></div><br><br>

<div style="position: relative; overflow: auto;">
	<?php
	$counter = 0;
	foreach($images as $curimg){
		if(!in_array($curimg,$ignore)) {
			echo "<a href='image.php?id=$curimg'><img id='myImage$counter' src='./thumb/$curimg' /></a> &nbsp";
			$counter = $counter + 1;
		};
	}
	?>
</div>
		
<br>
<!-- DEBUG -->
<!-- <?php

	echo(sizeof($images));
	echo('<br>');
	echo(sizeof($ignore));

?>

<div id="test">
</div>

<br>
<div id="mioDiv"></div> -->

</font>
</body>
</html>
